<template>
  <div class="main-layout">
    <!-- 头部 -->
    <header class="header">
      <header-component :show-back="true" title="我的设置" />
    </header>

    <!-- 主体内容 -->
    <div class="main-content">
      <!-- 左侧侧边栏 -->
      <aside class="sidebar">
        <aside-component />
      </aside>

      <!-- 页面主体内容 -->
      <div class="content-wrapper">
        <div class="content">
          <h2>我的设置</h2>

          <el-form label-width="120px" style="max-width: 500px;">
            <!-- 头像上传 -->
            <el-form-item label="头像">
              <user-avatar
                :src="userAvatar"
                size="large"
                uploadable
                @update:src="newAvatar => userAvatar = newAvatar"
              />
              <input type="file" ref="fileInput" accept="image/*" @change="handleFileChange" hidden>
              <el-button type="primary" @click="$refs.fileInput.click()" icon="el-icon-upload">上传新头像</el-button>
            </el-form-item>

            <!-- 用户名输入 -->
            <el-form-item label="用户名">
              <el-input v-model="username" placeholder="请输入你的用户名"></el-input>
            </el-form-item>

            <!-- 邮箱地址 -->
            <el-form-item label="邮箱">
              <el-input v-model="email" placeholder="请输入你的邮箱" disabled></el-input>
            </el-form-item>

            <!-- 提交按钮 -->
            <el-form-item>
              <el-button type="success" @click="saveSettings">保存设置</el-button>
              <el-button @click="resetForm">重置</el-button>
            </el-form-item>
          </el-form>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import AsideComponent from '@/components/Aside.vue'
import HeaderComponent from '@/components/Header.vue'
import UserAvatar from '@/components/UserAvatar.vue'

export default {
  name: 'UserSettings',
  components: { AsideComponent, HeaderComponent, UserAvatar },
  data() {
    return {
      userAvatar: '',
      username: '',
      email: ''
    }
  },
  computed: {
    currentUser() {
      return this.$store.state.user
    }
  },
  created() {
    if (this.currentUser) {
      this.userAvatar = this.currentUser.avatar || ''
      this.username = this.currentUser.username || ''
      this.email = this.currentUser.email || ''
    }
  },
  methods: {
    handleFileChange(event) {
      const file = event.target.files[0]
      if (!file) return

      const reader = new FileReader()
      reader.onload = e => {
        this.userAvatar = e.target.result
      }
      reader.readAsDataURL(file)
    },
    saveSettings() {
      const updatedUser = {
        ...this.currentUser,
        avatar: this.userAvatar,
        username: this.username
      }

      try {
        // 更新 Vuex 和 sessionStorage
        this.$store.dispatch('updateUserInfo', updatedUser)

        this.$message.success('保存成功')
        this.$router.push('/chat') // 跳转到聊天室，WebSocket 自动同步用户名
      } catch (error) {
        console.error('保存失败:', error)
        this.$message.error('保存失败，请重试')
      }
    },
    resetForm() {
      if (this.currentUser) {
        this.userAvatar = this.currentUser.avatar || ''
        this.username = this.currentUser.username || ''
        this.email = this.currentUser.email || ''
      } else {
        this.userAvatar = ''
        this.username = ''
        this.email = ''
      }
    }
  }
}
</script>

<style scoped>
.main-layout {
  display: flex;
  flex-direction: column;
  height: 100vh;
}

.header {
  height: 60px;
  background-color: #ffffff;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  z-index: 1000;
}

.main-content {
  display: flex;
  flex: 1;
  overflow: hidden;
}

.content-wrapper {
  flex: 1;
  padding: 20px;
  overflow-y: auto;
}

.el-form {
  margin: auto;
}
</style>